<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="icon" href="../jpg/ram.png" type="image/x-icon">
    <audio src="../music/bgm.mp3" autoplay="autoplay" loop="loop" id="bgAudio"></audio>
    <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>

    <script src="../js/jq.snow.js"></script>
    <!--下面是调用方法和参数说明-->
    <script>
        $(function() {
            $.fn.snow({
                minSize: 5, //雪花的最小尺寸
                maxSize: 40, //雪花的最大尺寸
                newOn: 100 //雪花出现的频率 这个数值越小雪花越多
            });
        });
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(../jpg/5.jpg) no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }
        
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
        
        #loginDiv {
            background: rgba(0, 0, 0, 0.5);
            width: 420px;
            height: 600px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            padding: 30px 40px 40px 40px;
            box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
            z-index: 99999;
            margin-top: 100px;
        }
        
        #name_trip {
            margin-left: 50px;
            color: red;
        }
        
        p,
        .sexDiv {
            margin-top: 10px;
            margin-left: 20px;
            color: azure;
        }
        
        .sexDiv>input,
        .hobby>input {
            width: 30px;
            height: 17px;
        }
        
        input,
        select {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }
        
        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
        
        .introduce {
            margin-left: 110px;
        }
        
        .introduce>textarea {
            background-color: rgba(216, 191, 216, 0.5);
            border-style: hidden;
            outline: none;
            border-radius: 5px;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 20px;
            margin-top: 20px;
            color: #f0edf3;
        }
        
        b {
            margin-left: 50px;
            color: #FFEB3B;
            font-size: 10px;
            font-weight: initial;
        }
        
        a .menu a:hover {
            color: rgb(14, 194, 218);
        }
        
        .all {
            width: 100%;
            height: 1600px;
        }
        
        .menu {
            width: 100%;
            height: 80px;
            text-align: center;
            position: fixed;
            top: 0px;
            left: 0px;
            margin: 0 auto;
            z-index: 99999;
            opacity: 1;
            background-color: white;
        }
        
        .left1 {
            height: 80px;
            float: left;
            margin-left: 50px;
        }
        
        .left1 ul li {
            padding: 0px 20px;
            float: left;
            list-style: none;
        }
        
        .left1 ul li a {
            text-decoration: none;
            color: rgb(35, 37, 39);
            font-size: 25px;
            line-height: 80px;
            width: 140px;
            font-family: STXingkai;
        }
        
        .right1 {
            height: 80px;
            float: right;
            margin: 80px;
            display: flex;
            margin-top: 25px;
        }
        
        .right1 ul li {
            padding: 0px 15px;
            float: right;
            list-style: none;
        }
        
        .right1 a {
            text-decoration: none;
            color: rgb(35, 37, 39);
            font-size: 20px;
            width: 80px;
        }
        
        .right1 input {
            float: left;
            flex: 4;
            height: 30px;
            outline: none;
            border: 1px solid rgb(40, 40, 40);
            box-sizing: border-box;
            padding-left: 10px;
        }
        
        .right1 button {
            float: right;
            flex: 1;
            height: 30px;
            width: 35px;
            background-color: #282828;
            color: white;
            border-style: none;
            outline: none;
            cursor: pointer;
        }
        
        .right1 button i {
            font-style: normal;
        }
        
        .right1 button:hover {
            background-color: rgb(152, 231, 255);
        }
        
        #apiResponse {
            color: #FFEB3B;
            text-align: center;
            margin-top: 10px;
            font-size: 14px;
        }
        
        #loading {
            display: none;
            text-align: center;
            margin-top: 10px;
        }
        
        #loading img {
            width: 30px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div class="menu">
        <div class="left1">
            <ul>
                <li><img src="../jpg/demo3.png"></li>
                <li><a href="../index.html">首页</a></li>
                <li>
                    <a href="../webs/live.html">随笔</a>
                </li>
                <li>
                    <a href="../webs/fun.html">娱乐</a>
                </li>

                <li><a href="../webs/record.html">留言</a></li>
                <li><a href="../webs/resume.html">个人中心</a></li>

            </ul>

        </div>
        <div class="right1">
            <ul>

                <li>
                    <a href="../webs/set.html" target="_blank"> <img src="../jpg/set.png" width="30px" height="30px"></a>
                </li>
                <li>
                    <a href="../webs/sign.html" target="_blank">
                        <img src="../jpg/logon.png" width="30px" height="30px">
                    </a>
                </li>
                <li>
                    <input type="text" placeholder="请输入..." name="" id="" value="" style="border-top-left-radius: 15px;
                    border-top-right-radius: 15px;
                    border-bottom-left-radius: 15px;
                    border-bottom-right-radius: 15px;" />&nbsp;&nbsp;
                    <a href="../webs/find.html" target="_blank"><button style="border-top-left-radius: 12px;
                    border-top-right-radius: 12px;
                    border-bottom-left-radius: 12px;
                    border-bottom-right-radius: 12px;">搜</button>
                    </a>
                </li>

            </ul>
        </div>
    </div>
    <div id="loginDiv">
        <form id="registerForm">
            <h1>注册</h1>
            <p>用户姓名:<input id="userNname" type="text" autofocus required><label id="name_trip"></label></p>

            <p>用户密码:<input id="password" type="password" required><label id="password_trip"></label></p>

            <p>确认密码:<input id="surePassword" type="password" required><label id="surePassword_trip"></label></p>

            <p>
                用户类型:
                <select name="type" id="userType">
                    <option value="0">请选择</option>
                    <option value="1">普通类型</option>
                    <option value="2">VIP类型</option>
                </select>
                <label id="type_trip"></label>
            </p>
            <div class="sexDiv">
                用户性别:
                <input class="userSex" name="sex" value="boy" type="radio">男
                <input class="userSex" name="sex" value="girl" type="radio">女
                <label id="sex_trip"></label>
            </div>
            <p>
                出生日期:
                <input id="birthday" type="date">
                <label id="birthday_trip"></label>
            </p>
            <p class="hobby">
                兴趣爱好:
                <input type="checkbox" name="hobby" value="read">阅读
                <input type="checkbox" name="hobby" value="music">音乐
                <input type="checkbox" name="hobby" value="sport">运动
                <label id="hobby_trip"></label>
            </p>
            <p>
                电子邮件:
                <input id="email" type="email" required>
                <label id="emil_trip"></label>
            </p>
            <p> 自我介绍:</p>
            <div class="introduce">
                <textarea name="introduce" cols="30" id="introduceText" required rows="10"></textarea>
                <label id="introduce_trip"></label>
            </div>
            <div id="loading">
                <img src="../jpg/loading.gif" alt="Loading...">
                <p>正在注册...</p>
            </div>
            <div id="apiResponse"></div>
            <p style="text-align: center;">
                <input type="submit" class="button" id="submitBtn" value="提交">
                <input type="reset" class="button" value="重置">
            </p>
        </form>
    </div>

</body>
<script type="text/javascript">
    // API基础URL
    const API_BASE_URL = 'http://localhost:5000/api';

    function trip(obj, trip) {
        document.getElementById(obj).innerHTML = "<b>" + trip + "</b>";
    }

    function checkSex() {
        var sexNum = document.getElementsByName("sex");
        var sex = "";
        for (let i = 0; i < sexNum.length; ++i) {
            if (sexNum[i].checked) {
                sex = sexNum[i];
            }
        }
        if (sex == "") {
            trip("sex_trip", "ERROR!!");
            return false;
        } else {
            trip("sex_trip", "OK!!");
            return true;
        }
    }

    function checkHobby() {
        var hobbyNum = document.getElementsByName("hobby");
        var hobby = "";
        for (let i = 0; i < hobbyNum.length; ++i) {
            if (hobbyNum[i].checked) {
                hobby = hobbyNum[i];
            }
        }
        if (hobby == "") {
            trip("hobby_trip", "ERROR!!");
            return false;
        } else {
            trip("hobby_trip", "OK!!");
            return true;
        }
    }

    function checkSelect() {
        var myselect = document.getElementById("userType");
        var index = myselect.selectedIndex;
        var checkValue = myselect.options[index].value;
        if (checkValue == 0) {
            trip("type_trip", "请选择!!");
            return false;
        } else {
            trip("type_trip", "OK!!");
            return true;
        }
    }

    function checkForm() {
        if (!checkSelect() || !checkHobby() || !checkSex()) {
            return false;
        }

        var username = document.getElementById("userNname").value;
        var password = document.getElementById("password").value;
        var confirmPassword = document.getElementById("surePassword").value;
        var email = document.getElementById("email").value;

        if (username.length < 1 || username.length > 10) {
            trip("name_trip", "账号长度为1-10位!!");
            return false;
        } else {
            trip("name_trip", "OK!!");
        }

        if (password.length < 6) {
            trip("password_trip", "密码要>6位!!");
            return false;
        } else {
            trip("password_trip", "OK!!");
        }

        if (password !== confirmPassword) {
            trip("surePassword_trip", "两次密码不一致!!");
            return false;
        } else {
            trip("surePassword_trip", "OK!!");
        }

        if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(email)) {
            trip("emil_trip", "邮箱不合法!!");
            return false;
        } else {
            trip("emil_trip", "OK!!");
        }

        return true;
    }

    // 处理表单提交
    document.getElementById('registerForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        if (!checkForm()) {
            return;
        }

        // 显示加载状态
        document.getElementById('loading').style.display = 'block';
        document.getElementById('apiResponse').textContent = '';

        // 准备发送到API的数据
        const userData = {
            username: document.getElementById('userNname').value,
            email: document.getElementById('email').value,
            password: document.getElementById('password').value
        };

        try {
            // 调用注册API
            const response = await fetch(`${API_BASE_URL}/auth/register`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(userData)
            });

            const data = await response.json();

            if (response.ok) {
                // 注册成功
                document.getElementById('apiResponse').textContent = '注册成功！';
                // 存储token
                localStorage.setItem('token', data.token);
                localStorage.setItem('user', JSON.stringify(data.user));
                // 跳转到登录页面
                setTimeout(() => {
                    window.location.href = '../webs/sign.html';
                }, 1500);
            } else {
                // 显示错误信息
                document.getElementById('apiResponse').textContent = data.message || '注册失败';
            }
        } catch (error) {
            console.error('注册请求失败:', error);
            document.getElementById('apiResponse').textContent = '注册请求失败，请稍后重试';
        } finally {
            // 隐藏加载状态
            document.getElementById('loading').style.display = 'none';
        }
    });
</script>

</html>